<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>运营账号管理</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <link rel="stylesheet" href="css/operationManagement.css">
</head>
<body>
<!-- 最上方logo -->
<div id="app">
    <div id="top">
        <div id="logo">
            <p>
                <span>禧创</span>
            </p>
            <i class="el-icon-s-operation"></i>
        </div>
        <div id="sub">
            <p>
                <span>OCP全渠道数字平台</span>
            </p>
        </div>
        <div id="detail">
            <el-row>
                <el-button class="el-icon-chat-dot-round" type="danger" style="color: white;" circle></el-button>
                <el-button class="el-icon-s-custom" type="danger" style="color: white;" circle></el-button>
            </el-row>
        </div>
        <div id="exit">
            <el-button class="el-icon-switch-button" type="danger" style="color: white;" circle></el-button>
        </div>
    </div>
    <!-- 上方导航栏 -->
    <!--<div id="nav">-->
        <!--&lt;!&ndash; 相应页面链接 &ndash;&gt;-->
    <!--</div>-->
    <!-- 侧边导航栏 -->
    <div id="left">
        <template>
            <div class="demo-type">
                <!--管理员头像-->
                <div class="img">
                    <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </div>
                <div class="msg">
                    <!-- 管理员姓名 -->
                    <span>Name</span>
                    <br>
                    <span>管理员</span>
                </div>
            </div>
        </template>
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white"
        >
            <el-submenu index="1">
                <template slot="title">

                    <a href="homepageY.html"><span><i class="el-icon-s-home" style="color: white"></i>首页</span></a>
                </template>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-document-copy" style="color: white"></i>
                    <span>备货订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1">备货计划列表</el-menu-item>
                    <el-menu-item index="2-2">待审核备货订单</el-menu-item>
                    <el-menu-item index="2-3">待复核备货订单</el-menu-item>
                    <el-menu-item index="2-4">汇总计划列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-data-line" style="color: white"></i>
                    <span>销售订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">零售订单列表</el-menu-item>
                    <el-menu-item index="3-2">批发订单列表</el-menu-item>
                    <el-menu-item index="3-3">待审核批发订单</el-menu-item>
                    <el-menu-item index="3-4">待复核批发订单</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-bell" style="color: white"></i>
                    <span>售后管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="4-1"><a href="unChecked.html">待审核退换货订单列表</a></el-menu-item>
                    <el-menu-item index="4-2"><a href="exchangeY.html">退换货订单列表</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <i class="el-icon-user" style="color: white"></i>
                    <span>经销商管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="5-1">经销商列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
                <template slot="title">
                    <i class="el-icon-shopping-cart-full" style="color: white"></i>
                    <span>库存管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="6-1">仓库维护</el-menu-item>
                    <el-menu-item index="6-2">菜鸟仓库存列表</el-menu-item>
                    <el-menu-item index="6-3">工厂库存列表</el-menu-item>
                    <el-menu-item index="6-4">调拨单列表</el-menu-item>
                    <el-menu-item index="6-5">创建调拨单</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="7">
                <template slot="title">
                    <i class="el-icon-goods" style="color: white"></i>
                    <span>产品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="7-1">产品列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="8">
                <template slot="title">
                    <i class="el-icon-suitcase-1" style="color: white"></i>
                    <span>内容维护</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="8-1">首页公告列表</el-menu-item>
                    <el-menu-item index="8-2">首页咨讯列表</el-menu-item>
                    <el-menu-item index="8-3">首页信息平台列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="9">
                <template slot="title">
                    <i class="el-icon-setting" style="color: white"></i>
                    <span>系统配置</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="9-1"><a href="operationManagement.html">运营账号管理</a></el-menu-item>
                    <el-menu-item index="9-2"><a href="distributorManagement.html">经销商账号管理</a></el-menu-item>
                    <el-menu-item index="9-3">菜单管理</el-menu-item>
                    <el-menu-item index="9-4"><a href="roleManagement.html">运营角色管理</a></el-menu-item>
                    <el-menu-item index="9-5">日志</el-menu-item>
                    <el-menu-item index="9-6">数据字典</el-menu-item>
                    <el-menu-item index="9-7">机构管理</el-menu-item>
                    <el-menu-item index="9-8">产品类别</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
    <!-- 中间部分-->
    <!-- 上方导航栏 -->
    <div id="nav">
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1"><a href="">数据字典</a></el-menu-item>
            <el-menu-item index="2"><a href="distributorManagement.html">经销商账号管理</a></el-menu-item>
            <el-menu-item index="3"><a href="">菜单管理</a></el-menu-item>
            <el-menu-item index="4"><a href="roleManagement.html">运营角色管理</a></el-menu-item>
            <el-menu-item index="5"><a href="operationManagement.html">运营账号管理</a></el-menu-item>
        </el-menu>
    </div>
    <!--子账号信息动态查询-->
    <div id="sub1">
        <!--获取用户名、状态、角色信息-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="用户名：">
                <el-input v-model="formInline.operateName" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="状态：">
                <el-select v-model="formInline.isAble" placeholder="全部" clearable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="启用" value="启用"></el-option>
                    <el-option label="禁用" value="禁用"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属机构：">
                <el-select v-model="formInline.organizationName" placeholder="电商部" clearable>
                    <el-option label="总经办" value="总经办"></el-option>
                    <el-option label="生产部" value="生产部"></el-option>
                    <el-option label="IT部" value="IT部"></el-option>
                    <el-option label="电商部" value="电商部"></el-option>
                    <el-option label="采购部" value="采购部"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
    <!--获取真实姓名、手机号码、性别信息-->
    <div id="sub2">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="真实姓名：">
                <el-input v-model="formInline.realName" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号码：">
                <el-input v-model="formInline.phone" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="性别：">
                <el-select v-model="formInline.sex" placeholder="全部" clearable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
                <el-form-item>
                    <el-button type="danger" @click="onSubmit" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form-item>
        </el-form>
    </div>
    <!--子账号功能组件-->
    <div id="but">
        <el-row>
            <el-button type="danger" icon="el-icon-circle-plus-outline" size="medium" @click="dialogFormVisible = true">新增</el-button>
            <el-button type="danger" icon="el-icon-user-solid" size="medium" @click="dialogForm1Visible = true">分配角色</el-button>
            <el-button type="danger" icon="el-icon-delete" size="medium" @click="deleted">删除</el-button>
            <el-button type="danger" icon="el-icon-video-play" size="medium" @click="open">启用</el-button>
            <el-button type="danger" icon="el-icon-remove" size="medium" @click="ban">禁用</el-button>
        </el-row>
        <!-- 新增信息功能 -->
        <el-dialog title="新增账户" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名：" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名：" prop="realname">
                    <el-input v-model="ruleForm.realname" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="所属机构：" prop="partment">
                    <el-select v-model="ruleForm.partment" placeholder="请选择">
                        <el-option label="总经办" value="gmo1"></el-option>
                        <el-option label="生产部" value="pd1"></el-option>
                        <el-option label="IT部" value="IT1"></el-option>
                        <el-option label="电商部" value="ecd1"></el-option>
                        <el-option label="采购部" value="pud1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色：" prop="role">
                    <el-select v-model="ruleForm.role" placeholder="请选择">
                        <el-option label="管理员" value="gmo"></el-option>
                        <el-option label="生产部经理" value="pd"></el-option>
                        <el-option label="IT部职员" value="IT"></el-option>
                        <el-option label="电商部经理" value="ecd"></el-option>
                        <el-option label="采购部经理" value="pud"></el-option>
                        <el-option label="电商操作员" value="opea"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别：" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号码：" prop="phone">
                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱：" prop="email">
                    <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 修改账户信息功能 -->
        <el-dialog title="修改账户信息" :visible.sync="dialogForm2Visible">
            <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名：" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名：" prop="realname">
                    <el-input v-model="ruleForm.realname" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="所属机构：" prop="partment">
                    <el-select v-model="ruleForm.partment" placeholder="请选择">
                        <el-option label="总经办" value="gmo1"></el-option>
                        <el-option label="生产部" value="pd1"></el-option>
                        <el-option label="IT部" value="IT1"></el-option>
                        <el-option label="电商部" value="ecd1"></el-option>
                        <el-option label="采购部" value="pud1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色：" prop="role">
                    <el-select v-model="ruleForm.role" placeholder="请选择">
                        <el-option label="管理员" value="gmo"></el-option>
                        <el-option label="生产部经理" value="pd"></el-option>
                        <el-option label="IT部职员" value="IT"></el-option>
                        <el-option label="电商部经理" value="ecd"></el-option>
                        <el-option label="采购部经理" value="pud"></el-option>
                        <el-option label="电商操作员" value="opea"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别：" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号码：" prop="phone">
                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱：" prop="email">
                    <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm2')">保存</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 分配角色功能 -->
        <el-dialog title="分配角色" :visible.sync="dialogForm1Visible">
            <el-form :model="form">
                <el-form-item label="" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="管理员" name="type"></el-checkbox>
                        <el-checkbox label="生产部经理" name="type"></el-checkbox>
                        <el-checkbox label="IT部职员" name="type"></el-checkbox>
                        <br>
                        <el-checkbox label="电商部经理" name="type"></el-checkbox>
                        <el-checkbox label="采购部经理" name="type"></el-checkbox>
                        <el-checkbox label="电商操作员" name="type"></el-checkbox>
                        <br>
                        <el-checkbox label="总经办助理" name="type"></el-checkbox>
                        <el-checkbox label="生产部操作员" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogForm1Visible = false">保 存</el-button>
                <el-button @click="dialogForm1Visible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
    <!--子账号管理表格-->
    <!--中间表格-->
    <div class="form">
        <template>
            <el-table :data="tableData" border style="border:1px solid darkgrey" size="mini" :fit="true"
                      :header-cell-style="{background:'darkgray',color:'#fff'}">
                <el-table-column type="selection"></el-table-column>
                <el-table-column type="index" label="序号"align="center"></el-table-column>
                <el-table-column prop="operateName" label="用户名"align="center"></el-table-column>
                <el-table-column prop="realName" label="真实姓名"align="center"></el-table-column>
                <el-table-column prop="organizationName" label="所属机构"align="center"></el-table-column>
                <el-table-column prop="role" label="角色"align="center"></el-table-column>
                <el-table-column prop="sex" label="性别"align="center"></el-table-column>
                <el-table-column prop="email" label="电子邮箱"align="center"></el-table-column>
                <el-table-column prop="phone" label="手机号码"align="center"></el-table-column>
                <el-table-column prop="isAble" label="状态"align="center"></el-table-column>
                <el-table-column prop="handle" label="操作"align="center">
                    <i class="el-icon-delete" @click="deleted"></i>
                    <i class="el-icon-key" @click="reseted"></i>
                    <i class="el-icon-edit" @click="dialogForm2Visible = true"></i>
                    <i class="el-icon-user" @click="dialogForm1Visible = true"></i>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="40"
                        layout="sizes, prev, pager, next, jumper"
                        :total="1000">
                </el-pagination>
            </div>
        </template>
    </div>
</div>
</body>
    <script type="module">
        let vm=new Vue({
        el:'#app',
        data() {
            return {
                //获取动态查询信息
                formInline: {
                    operateName: '',
                    isAble: '',
                    organizationName: '',
                    realName: '',
                    phone: '',
                    sex: '',
                },
                //新增信息
                ruleForm: {
                    name: '',
                    realname: '',
                    partment: '',
                    role: '',
                    sex: '',
                    phone: '',
                    email: '',
                    desc: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    realname: [
                        { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    ],
                    partment: [
                        { required: true, message: '请选择', trigger: 'change' }
                    ],
                    role: [
                        { required: true, message: '请选择', trigger: 'change' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                },
                //修改账号信息
                ruleForm2: {
                    name: '',
                    realname: '',
                    partment: '',
                    role: '',
                    sex: '',
                    phone: '',
                    email: '',
                    desc: ''
                },
                rules2: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    realname: [
                        { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    ],
                    partment: [
                        { required: true, message: '请选择', trigger: 'change' }
                    ],
                    role: [
                        { required: true, message: '请选择', trigger: 'change' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                },
                //分配权限
                form: {
                    type: [],
                },
                dialogFormVisible: false,
                dialogForm1Visible: false,
                dialogForm2Visible: false,
                formLabelWidth: '120px',
                //表格
                activeIndex2: '5',
                tableData: [],
                //分页功能
                currentPage4: 4,
            };
        },
        created(){
            this.getAccountY();
        },
        methods: {
                handleOpen(key,keyPath){
                    console.log(key,keyPath);
                },
                handleClose(key,keyPath){
                    console.log(key,keyPath);
                },
            onSubmit() {
                console.log(this.formInline);
                let url="http://localhost:8088/getAccountY";
                axios.post(url,this.formInline)
                    .then(result=>{
                        if (result.data.flag){
                            this.tableData=result.data.rows;
                        }
                        else {
                            console.log(result.data.message);
                        }
                    })
            },
            //新增信息保存
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('保存成功!');
                    } else {
                        console.log('保存失败!!');
                        return false;
                    }
                });
            },
            //新增信息重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //删除信息
            deleted() {
                this.$confirm('您确定要删除该帐号吗?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //重置子账号密码
            reseted() {
                this.$confirm('您确定要重置该帐号密码吗?', '重置密码提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '重置成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
            },
            //启用子账号
            open() {
                this.$confirm('您确定要启用该帐号吗?', '启用帐号提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '启用成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消启用'
                    });
                });
            },
            //禁用子账号
            ban() {
                this.$confirm('您确定要禁用该子账号吗?', '禁用帐号提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '禁用成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消禁用'
                    });
                });
            },
            //分页功能
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
        //    获取账户信息
            getAccountY(){
                let url="http://localhost:8088/getAccountY";
                axios.post(url)
                    .then(result=>{
                        if (result.data.flag){
                            this.tableData=result.data.rows;
                        }
                        else {
                            console.log(result.data.message);
                        }
                    })
            }
        },

    });



</script>
</html>